<template>
  <div>
    <div
      v-for="(item, index) of supplierInp"
      :key="index"
      class="flex_y_center"
      style="margin-bottom: 20px"
    >
      <div style="width: 30%; text-align: right">
        <span v-show="index < 3">*</span>
        {{ item.name }}
      </div>
      <el-input
        v-model="supplierForm[item.value]"
        :placeholder="item.place"
        style="width: 40%"
      />
    </div>
    <div class="flex_between">
      <div></div>
      <el-button type="primary" @click="addSupplierInfo">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { addSupplier } from '@/api/supplier'

  export default {
    data() {
      return {
        supplierInp: [
          {
            name: '供应商名称：',
            place: '请输入供应商名称',
            value: 'supplier_name',
          },
          { name: '联系人：', place: '请输入联系人', value: 'contact' },
          { name: '联系人电话：', place: '请输入联系人电话', value: 'tel' },
          { name: '税号：', place: '请输入税号', value: 'company_sn' },
          {
            name: '付款信息开户行：',
            place: '请输入付款信息开户行',
            value: 'bank_name',
          },
          {
            name: '付款信息银行账户：',
            place: '请输入付款信息银行账户',
            value: 'bank_sn',
          },
          { name: '户名：', place: '请输入户名', value: 'bank_title' },
        ],
        // 供应商提交数据
        supplierForm: {
          supplier_name: '',
          contact: '',
          tel: '',
          company_sn: '',
          bank_name: '',
          bank_sn: '',
          bank_title: '',
        },
        hint: {
          supplier_name: '供应商名称',
          contact: '联系人',
          tel: '联系人电话',
        },
      }
    },
    methods: {
      // 添加供应商
      addSupplierInfo() {
        for (let item in this.hint) {
          if (this.supplierForm[item] == '') {
            this.$message.error(this.hint[item] + '未填写')
            return
          }
        }
        addSupplier(this.supplierForm).then(() => {
          this.$emit('send')
        })
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
